<template>
	<div id="rt_bmot_bottom_echarts" :style="{ width: '100%', height: '178px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
import { object } from 'vue-types';
export default {
	name: 'graphicEcharts',
	props: {
		graphicData: {
			type: Object,
			default: {},
		},
	},
	data() {
		return {};
	},
	watch: {
		graphicData: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				// this.initCharts(newVal);
				setTimeout(() => {
					this.initCharts(newVal);
				}, 300);
			},
		},
	},
	created() {
		// setTimeout(() => {
		// 	this.initCharts();
		// }, 300);
	},

	methods: {
		initCharts(newVal) {
			let xAxisdata = newVal.highWarnList.map((item) => {
				return item.localdate;
			});

			let seriesdata1 = newVal.highWarnList.map((item) => {
				return item.num;
			});
			let seriesdata2 = newVal.midWarnList.map((item) => {
				return item.num;
			});
			let seriesdata3 = newVal.lowWarnList.map((item) => {
				return item.num;
			});

			var myCharts1 = echarts.init(document.getElementById('rt_bmot_bottom_echarts'));
			// 绘制图表
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: '#57617B',
						},
					},
				},
				legend: {
					icon: 'rect',
					itemWidth: 14,
					itemHeight: 5,
					itemGap: 13,
					data: ['高', '中', '低'],
					right: '1%',
					textStyle: {
						fontSize: 12,
						color: '#F1F1F3',
					},
				},
				grid: {
					top: '5%',
					left: '1px',
					right: '1px',
					bottom: '8%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#57617B',
							},
						},
						data: xAxisdata,
					},
				],
				yAxis: [
					{
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#57617B',
							},
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#57617B',
							},
						},
					},
				],
				series: [
					{
						name: '高',
						type: 'line',
						smooth: true,
						lineStyle: {
							normal: {
								width: 1,
							},
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: 'rgba(219, 50, 51, 0.3)',
										},
										{
											offset: 0.8,
											color: 'rgba(219, 50, 51, 0)',
										},
									],
									false
								),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10,
							},
						},
						itemStyle: {
							normal: {
								color: 'rgb(219,50,51)',
							},
						},
						data: seriesdata1,
					},
					{
						name: '中',
						type: 'line',
						smooth: true,
						lineStyle: {
							normal: {
								width: 1,
							},
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: 'rgba(0, 136, 212, 0.3)',
										},
										{
											offset: 0.8,
											color: 'rgba(0, 136, 212, 0)',
										},
									],
									false
								),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10,
							},
						},
						itemStyle: {
							normal: {
								color: 'rgb(0,136,212)',
							},
						},
						data: seriesdata2,
					},
					{
						name: '低',
						type: 'line',
						smooth: true,
						lineStyle: {
							normal: {
								width: 1,
							},
						},

						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: 'rgba(137, 189, 27, 0.3)',
										},
										{
											offset: 0.8,
											color: 'rgba(137, 189, 27, 0)',
										},
									],
									false
								),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10,
							},
						},
						itemStyle: {
							normal: {
								color: 'rgb(137,189,27)',
							},
						},
						data: seriesdata3,
					},
				],
			};
			myCharts1.setOption(option);
			myCharts1.resize();
		},
	},
};
</script>
